<template>
  <div>
    <a-form @submit="bankSubmit" :form="form" style="margin:0px auto;width:70%;">
      <a-row>
        <a-col
          style="margin-top:80px;margin-bottom:30px;"
          :xs="{ span : 24 }"
          :sm="{ span:5 }"
          class="formGroupTitle"
        >添加银行卡</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="账户名称">
        <div>
          <span>{{userName}}</span>
        </div>
      </a-form-item>
      <!-- 单位客户-个体工商户 -->
      <a-form-item v-if="orgPer" v-bind="formItemLayout" label="证件号码">
        <div>
          <a-hide-data :params="{type:'idCard',value:idCard}"></a-hide-data>
        </div>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="卡号">
        <a-input
          v-if="ChargeType"
          v-decorator="[
                      'bankNo',
                      {rules: [{ required: true, message: '请输入储蓄卡卡号' },{
                        validator: validateBankNo,
                      }],validateTrigger: 'blur'}
                    ]"
          placeholder="请输入储蓄卡卡号"
        />
        <a-input
          v-if="!ChargeType"
          v-decorator="[
                      'bankNo',
                      {rules: [{ required: true, message: '请输入银行卡号' },{
                        validator: validateBankNo,
                      }],validateTrigger: 'blur'}
                    ]"
          placeholder="请输入银行卡号"
        />

        <!--<a-input
          v-decorator="[
                      'captcha',
                      {rules: [{ required: true, message: '请输入银行卡号!' }]}
                    ]"
          placeholder="请输入银行卡号" v-model="formDataCardNo.cardNo"
        />-->
      </a-form-item>
      <a-row>
        <a-col :sm="{ span:5 }"></a-col>
        <a-col style="margin-bottom:20px;" :xs="{ span : 24 }" :sm="{ span:7,offset:1}">
          <a-button :loading="loading" htmlType="submit" type="primary">下一步</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import GlobalFooter from "../../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import AHideData from "@/pages/common/HideData";
import { get } from "http";
const ATabPane = ATabs.TabPane;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    GlobalFooter,
    ATabPane,
    ATabs,
    AForm,
    AHideData
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 10, offset: 1 }
        }
      },
      form: this.$form.createForm(this),
      isSpe: false,
      formDataCardNo: {
        cardNo: null
      },
      form: this.$form.createForm(this),
      isSpe: false,
      userName: "",
      idCard: "412702199510167055",
      orgPer: false,
      ChargeType: false,
      loading:false
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getaddbankType();
    var bankUrl = this.$route.query.bankUrl;
    //如果不为空，重置token和保存返回路径
    if(bankUrl){
      localStorage.setItem("bankUrl",bankUrl);
      localStorage.setItem("token",this.getCookie("Authorization"));
    }else{
      localStorage.setItem("bankUrl","");
    }
  },
  mounted() {
    this.userName = sessionStorage.getItem("userName");
    
  },
  methods: {
    getaddbankType() {
      let addbanktype = sessionStorage.getItem("addbankType");
      if (addbanktype == 2 || addbanktype == 3) {
        this.ChargeType = true;
      }
    },
    getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          console.log(c)
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1){
            return c.substring(name.length, c.length);
          }
        }
        return "";
    },
    handleChange(value) {
      console.log(value);
    },
    gomanage() {
      this.$router.push("/per/accountmanage/myinfo");
    },
    validateBankNo(rule, value, callback) {
      const form = this.form;
      let len = value.length;
      if (value) {
        if (len < 12 || len > 19) {
          callback("您输入的银行卡号格式有误！");
        } else {
          console.log("银行卡号", value);
        }
      } else {
        console.log("银行卡号", value);
      }
      callback();
    },
    bankSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          this.formDataCardNo.cardNo = values.bankNo;
          // console.log(values.bankNo);
          this.$axios
            .post("/agent/binding/bankCard/unionPay/select", this.formDataCardNo)
            .then(res => {
              console.log("res--------", res);
              let addbanktype = sessionStorage.getItem("addbankType");
              if (addbanktype == 2 || addbanktype == 3) {
                if (res.data.code == "OK") {
                  this.loading = false
                  if (res.data.data.cardtype == 1) {
                    this.$router.push({
                      name: "银行卡新增储蓄卡",
                      params: {
                        bankCard: res.data.data,
                        cardNo: this.formDataCardNo,
                        cardtype: res.data.data.cardtype
                      }
                    });
                  } else {
                  this.$message.error("请输入储蓄卡卡号");
                }
                } else {
                  this.loading = false
                  this.$message.error(res.data.message);
                }
              } else {
                if (res.data.code == "OK") {
                  this.$router.push({
                    name: "银行卡新增储蓄卡",
                    params: {
                      bankCard: res.data.data,
                      cardNo: this.formDataCardNo,
                      cardtype: res.data.data.cardtype
                    }
                  });
                } else {
                  this.$message.error(res.data.message);
                }
              }
            });
        }
      });
    }
  }
};
</script>

<style scoped>
span {
  cursor: pointer;
}

li {
  list-style: none;
}

.formGroupTitle {
  font-size: 20px;
  font-weight: 500;
  text-align: right;
}
</style>
